


/* wrap */
.wrap{margin:0 auto;width:1136px;height:437px;position:relative;overflow:hidden;}
.pic{width:679px;height:437px;cursor:pointer;}
.pic1{background:url('../images/t1.jpg');position:absolute;top:0;left:0;z-index:1;}
.pic_num1{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:0 0;display:none;}
.pic2{background:url('../images/t2.jpg');position:absolute;top:0;left:679px;z-index:3;}
.pic_num2{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:-69px 0;}
.pic3{background:url('../images/t3.jpg');position:absolute;top:0;left:770px;z-index:5;}
.pic_num3{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:-138px 0;}
.pic4{background:url('../images/t4.jpg');position:absolute;top:0;left:861px;z-index:7;}
.pic_num4{width:74px;height:79px;position:absolute;top:40px;left:17px;background:url('../images/pic_num.jpg');background-position:-207px 0;}
.pic5{background:url('../images/t5.jpg');position:absolute;top:0;left:952px;z-index:9;}
.pic_num5{width:73px;height:79px;position:absolute;top:40px;left:18px;background:url('../images/pic_num.jpg');background-position:-276px 0;}
.pic6{background:url('../images/t6.jpg');position:absolute;top:0;left:1043px;z-index:11;}
.pic_num6{width:73px;height:79px;position:absolute;top:40px;left:18px;background:url('../images/pic_num.jpg');background-position:-345px 0;}
#hs-back-top {
	    font-family: Arial;
	    position: fixed;
	    right: 20px;
	    bottom: 150px;
        z-index: 1501;
	    height: 45px;
	    width: 45px;
	    color: #FFF;
	    text-align: center;
	    line-height: 36px;
	    cursor: pointer;
	    font-size: 20px;
	    background: 10px -133px rgba(0,0,0,0.3) url(//bbs.deepin.org/data/cache/template/deepin/image/icon_right.png) no-repeat;
	}
	
	ul, li {
	    list-style: none;
	}
	
	#hs-back-top.hs-hide {
	    display: none;
	}
	
	#hs-back-top:hover {
	    background-color: #2ca7f8;
	}
	.fa {
	    vertical-align: top;
	    margin-top: 5px;
	}
	.fa {
	    color: #2ca7f8;
	    margin-right: 5px;
	}
	  .if {
        z-index: 1500;
        position: relative;
        bottom: 0;
		padding:0 0 40px;
		background:#d22222;
		color:#fff;
		text-align:center
	}
	  .if .bx1 {
		height:43px;
		background:#272a30;
		line-height:43px
	}
	  .if .bx1 span.v {
		margin:0 15px;
		background-position:0 -13px
	}
	  .if .bx1 a {
		color:#ccc
	}
	  .if .bx1 a:hover {
		color:#fff
	}
	  .if .bx1 a:active {
		color:#f2f2f2
	}
	  .if .bx2 {
		padding-top:30px
	}
	  .if .bx2,  .if .bx2 a {
		color:#ffced8
	}
	  .if .bx2 a:hover {
		color:#fff;
		text-decoration:underline
	}
	  .if .bx2 a:active {
		color:#ffe4ea;
		text-decoration:underline
	}
	 #imgbox {
	  margin: 0 auto;
	  min-height: 50vh;

	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	 
	  font-family: "Source Sans Pro", Helvetica, sans-serif;
	  font-weight: 300;
	} 
	
	#grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, 160px);
	  grid-column-gap: 60px;
	  grid-row-gap: 33px;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  max-width: 864px;
	}
	#grid .card {
	  background-color: #ccc;
	  width: 150px;
	  height: 150px;
	  transition: all 0.1s ease;
	  border-radius: 3px;
	  position: relative;
	  z-index: 1;
	  box-shadow: 0 0 5px rgba(0, 0, 0, 0);
	  overflow: hidden;
	  cursor: pointer;
	}
	#grid .card:hover {
	  -webkit-transform: scale(2);
	          transform: scale(2);
	  z-index: 2;
	  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
	}
	#grid .card:hover img {
	  -webkit-filter: grayscale(0);
	          filter: grayscale(0);
	}
	#grid .card .reflection {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  z-index: 2;
	  left: 0;
	  top: 0;
	  transition: all 0.1s ease;
	  opacity: 0;
	  mix-blend-mode: soft-light;
	}
	#grid .card img {
	  width: 100%;
	  height: 100%;
	  -o-object-fit: cover;
	     object-fit: cover;
	  -webkit-filter: grayscale(0.65);
	          filter: grayscale(0.65);
	  transition: all 0.3s ease;
	}
	.custom-container {
	    width: 1140px;
	    margin: 0 auto;
	    overflow: hidden;
	    margin-top: 85px;
	}

.rank {
    display: none;
}


    .custom-container {
        width: auto;
        padding: 0 15px;
    }


.custom-container-left {
    width: 75.7894737%;
    float: left;
}

.custom-container-left .banner {
    overflow: hidden;
    position: relative;
    transition: .3s;
    margin-top: 10px;
}

.custom-container-left .banner .img {
    width: 100%;
    /* height: 100%;
    object-fit: cover; */
}

.custom-container-left .banner .nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    text-align: left;
}

.custom-container-left .banner .nav .nav-right {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: -ms-flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -o-justify-content: flex-end;
    -ms-justify-content: flex-end; }
.custom-container-left .banner .nav .nav-right div {
    height: 37px;
    line-height: 37px;
    color: #333;
    font-size: 14px;
    padding: 0 3.2%;
    transition: .24s;
    cursor: pointer;}
.custom-container-left .banner .nav .nav-right .order{
    background: rgba(16,137,214,.8);
}
.custom-container-left .banner .nav .nav-right .order a{
    color: #fff;
    display: inline-block;
    padding-left: 21px;
    background: url('images/icon_international.png') no-repeat left center;
    background-size: 16px 16px;
    margin-bottom: 0;
}
.custom-container-left .banner .nav .nav-right .order a:after{
    content: 'DistroWatch';
}
html[lang="zh-CN"] .custom-container-left .banner .nav .nav-right .order a:after{
    content: '国际排名';
}

.custom-container-left .banner .nav .nav-right .active {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
}

.custom-container-left .banner ul {
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    top: 0;
}

.custom-container-left .banner ul .slide {
    float: left;
    width: 50%;
    height: 100%;
}

.custom-container-left .news {
    margin-top: 3%;
}

.custom-container-left .news .news-head {
    height: 36px;
    line-height: 36px;
    position: relative;
    font-size: 18px;
    color: #333;
}

.custom-container-left .news .news-head i {
    font-size: 18px;
}

.custom-container-left .news .news-head .line {
    position: absolute;
    top: 50%;
    right: 0;
    height: 1px;
    width: 85.18519%;
    background: #e3e3e3;
}

.custom-container-left .news .news-content {
    margin-top: 14px;
    padding-right: 3.47222%;
}

.custom-container-left .news .news-content .item {
    margin-bottom: 20px;
    height: 130px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px dotted #d6d6d6;
}

.custom-container-left .news .news-content .item .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 187px;
    height: 96px;
    background: #ccc;
}

.custom-container-left .news .news-content .item .text {
    margin-left: 220px;
}

.custom-container-left .news .news-content .item .text .title {
    line-height: 32px;
    overflow: hidden;
}

.custom-container-left .news .news-content .item .text .title p, .custom-container-left .news .news-content .item .text .title a {
    float: left;
    font-size: 16px;
    color: #333;
}

.custom-container-left .news .news-content .item .text .title p{
    overflow: hidden;
}

.custom-container-left .news .news-content .item .text .title span {
    float: right;
    font-size: 12px;
    color: #777;
}

.custom-container-left .news .news-content .item .text .main {
    font-size: 14px;
    line-height: 22px;
    color: #777;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.custom-container-left .apply .apply-head {
    margin-top: 27px;
    margin-bottom: 19px;
    position: relative;
    font-size: 18px;
    color: #333;
}

.custom-container-left .apply .apply-head i {
    font-size: 18px;
}

.custom-container-left .apply .apply-head .line {
    position: absolute;
    top: 50%;
    right: 0;
    height: 1px;
    width: 85.18519%;
    background: #e3e3e3;
}

.custom-container-left .line2 {
    position: unset;
    top: 50%;
    right: 0;
    height: 4px;
    width: 100%;
    background-color: #d22222;

}

.custom-container-left .apply .content {
    overflow: hidden;
}

.custom-container-left .apply .content > div {
    float: left;
    width: 46.2963%;
    margin-right: 2.89352%;
}

.custom-container-left .apply .content > div .title {
    font-size: 16px;
    color: #333;
    line-height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%;
}

.custom-container-left .apply .content > div .text {
    font-size: 12px;
    color: #777;
    line-height: 20px;
    margin-top: 9px;
}

.custom-container-left .apply .content > div .text p {
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.custom-container-left .apply .content .right {
    margin-left: 1.15741%;
}

.custom-container-left .apply .apply-list {
    overflow: hidden;
    margin-top: 18px;
    margin-bottom: 68px;
}

.custom-container-left .apply .apply-list ul {
    float: left;
    width: 46.2963%;
    overflow: hidden;
    margin-right: 2.89352%;
}

.custom-container-left .apply .apply-list ul li {
    overflow: hidden;
}

.custom-container-left .apply .apply-list ul li p {
    float: left;
    font-size: 14px;
    color: #333;
    line-height: 28px;
    width: 65%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.custom-container-left .apply .apply-list ul li span {
    float: right;
    font-size: 12px;
    color: #777;
    line-height: 28px;
}

.custom-container-left .apply .apply-list ul:nth-child(2) {
    margin-left: 1.15741%;
}

.custom-container-left .news-head i, .apply-head i {
    padding-right: 1.15741%;
}

.custom-container-right {
    float: right;
    width: 20.70175%;
}

.custom-container-right .item {
    box-sizing: border-box;
    margin-bottom: 25px;
}

.custom-container-right .item .box {
    border: 1px solid #ededed;
}

.custom-container-right .item .title {
    margin-bottom: 13px;
    font-size: 16px;
    color: #333;
    line-height: 32px;
}



.custom-container-right .hot li {
    font-size: 12px;
    color: #333;
    line-height: 30px;
}

.custom-container-right .hot li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
}

.custom-container-right .hot li p:before {
    content: '· ';
}

.custom-container-right .hot .box {
    padding: 6.77966%;
}
.custom-container-right .new li {
    font-size: 12px;
    color: #333;
    line-height: 30px;
}

.custom-container-right .new li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
}

.custom-container-right .new li p:before {
    content: '· ';
}

.custom-container-right .new .box {
    padding: 6.77966%;
}

.custom-container-right .hot-block .box {
    padding: 12.71186% 6.77966%;
}

.custom-container-right .hot-block .box img {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    float: left;
}

.custom-container-right .hot-block .box p {
    font-size: 14px;
    color: #333;
    margin-bottom: 23px;
    overflow: hidden;
    line-height: 27px;
}

.custom-container-right li:last-child .box p {
    margin-bottom: 0;
}

.custom-container-right .hot-block .box i, .hot-block .box span {
    float: left;
}

	#calenderhome{
		font:300 18px/18px Roboto, sans-serif;
		transition:background .4s ease-in-out 0s;
		float: left;
	}
	
	*,:after,:before{box-sizing:border-box}
	.pull-left{float:left}
	.pull-right{float:right}
	.clearfix:after,.clearfix:before{content:'';display:table}
	.clearfix:after{clear:both;display:block}
	
	.calendar{width:225px;font-size:75%;margin:50px auto 0;-webkit-perspective:1000px;perspective:1000px;cursor:default;position:relative}
	.calendar .header{height:75px;position:relative;color:#fff}
	.calendar .header .text{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#308ff0;padding:15px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:.4s ease-in-out 0s;box-shadow:0 6px 20px 0 rgba(0,0,0,.19), 0 8px 17px 0 rgba(0,0,0,.2);opacity:0}
	.calendar .header .text>span{text-align:center;padding:13px;display:block}
	.calendar .header.active .text{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1}
	.months{width:100%;height:210px;position:relative}
	.months .hr{height:15px;margin:15px 0;background:#ccc}
	.month{padding:15px;width:inherit;height:inherit;background:#fff;position:absolute;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:all .4s ease-in-out 0s;box-shadow:0 6px 20px 0 rgba(0,0,0,.19),0 8px 17px 0 rgba(0,0,0,.2)}
	.months[data-flow="left"] .month{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}
	.months[data-flow="right"] .month{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}
	.table{width:100%;font-size:10px;font-weight:200;display:table}
	.table .row{display:table-row}
	.table .row.head{color:#308ff0;text-transform:uppercase}
	.table .row .cell{width:14.28%;padding:0px;text-align:center;display:table-cell}
	.table .row .cell.disable{color:#ccc}
	.table .row .cell span{display:block;width:28px;height:28px;line-height:28px;transition:color,background .4s ease-in-out 0s}
	.table .row .cell.active span{color:#fff;background-color:#308ff0}
	.months .month[data-active="true"]{-webkit-transform:rotateY(0);transform:rotateY(0)}
	.header [data-action]{color:inherit;position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;z-index:1;opacity:0;transition:all .4s ease-in-out 0s}
	.header [data-action]>i{width:20px;height:20px;display:block;position:absolute;left:50%;top:50%;margin-top:-10px;margin-left:-10px}
	.header [data-action]>i:before,.header [data-action]>i:after{top:50%;margin-top:-1px;content:'';position:absolute;height:2px;width:20px;border-top:2px solid;border-radius:2px}
	.header [data-action*="prev"]{left:15px}
	.header [data-action*="next"]{right:15px}
	.header [data-action*="prev"]>i:before,.header [data-action*="prev"]>i:after{left:0}
	.header [data-action*="prev"]>i:before{top:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
	.header [data-action*="prev"]>i:after{top:auto;bottom:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
	.header [data-action*="next"]>i:before,.header [data-action*="next"]>i:after{right:0}
	.header [data-action*="next"]>i:before{top:auto;bottom:3px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
	.header [data-action*="next"]>i:after{top:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
	.header.active [data-action]{opacity:1}
	
	
	[data-theme="1月"] .row.head{color:#1E88E5}
	[data-theme="1月"] .header .text,
	[data-theme="1月"] .table .row .cell.active span{background-color:#1E88E5}
	
	
	[data-theme="2月"] .row.head{color:#039BE5}
	[data-theme="2月"] .header .text,
	[data-theme="2月"] .table .row .cell.active span{background-color:#039BE5}
	
	
	[data-theme="3月"] .row.head{color:#00897B}
	[data-theme="3月"] .header .text,
	[data-theme="3月"] .table .row .cell.active span{background-color:#00897B}
	
	
	[data-theme="4月"] .row.head{color:#7CB342}
	[data-theme="4月"] .header .text,
	[data-theme="4月"] .table .row .cell.active span{background-color:#7CB342}
	
	
	[data-theme="5月"] .row.head{color:#FFB300}
	[data-theme="5月"] .header .text,
	[data-theme="5月"] .table .row .cell.active span{background-color:#FFB300}
	
	
	[data-theme="6月"] .row.head{color:#F4511E}
	[data-theme="6月"] .header .text,
	[data-theme="6月"] .table .row .cell.active span{background-color:#F4511E}
	
	
	[data-theme="7月"] .row.head{color:#8E24AA}
	[data-theme="7月"] .header .text,
	[data-theme="7月"] .table .row .cell.active span{background-color:#8E24AA}
	
	
	[data-theme="8月"] .row.head{color:#5E35B1}
	[data-theme="8月"] .header .text,
	[data-theme="8月"] .table .row .cell.active span{background-color:#5E35B1}
	
	
	[data-theme="9月"] .row.head{color:#E53935}
	[data-theme="9月"] .header .text,
	[data-theme="9月"] .table .row .cell.active span{background-color:#E53935}
	
	
	[data-theme="10月"] .row.head{color:#8E24AA}
	[data-theme="10月"] .header .text,
	[data-theme="10月"] .table .row .cell.active span{background-color:#8E24AA}
	
	
	[data-theme="11月"] .row.head{color:#6D4C41}
	[data-theme="11月"] .header .text,
	[data-theme="11月"] .table .row .cell.active span{background-color:#6D4C41}
	
	
	[data-theme="12月"] .row.head{color:#546E7A}
	[data-theme="12月"] .header .text,
	[data-theme="12月"] .table .row .cell.active span{background-color:#546E7A}